<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <!-- 开发版本 .min.js 为生产版本  生产版本没有开发日志警告-->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="demo">
        <!-- vue模板  插值表达式 -->
        <!-- 
            js表达式和js代码（语句）
            1. 表达式：一个表达式会生成一个值 a  a+b  demo(1)  x===y?x:0
            2. js语句： if, for,
         -->
        <!-- {{}} 中可以为：data中属性，js表达式 -->
        <h1>hello, {{name}}, {{name.toUpperCase()}}, {{1+1}}, {{Date.now()}}</h1>
        <h1>年龄： {{age}}</h1>
    </div>
    <!-- 没有被vue绑定 -->
    {{name}}
</body>
<script>
    // 全局配置关闭 生产提示
    Vue.config.productionTip = false
    // 创建vue实例 参数配置对象
    /* 
        多个容器不能对应一个vue实例
        一个容器不能对应多个vue实例
        容器和vue实例的关系是一一对应的
        data中数据发生改变 页面中数据也会自动更新
    */
    new Vue({
        // 元素选择器 #id选择器  .class选择器 如果找到多个,选择第一个
        el:'#demo'
        // 数据绑定
        ,data:{
            name:'vue'
            ,age:20
        }
    })
</script>
</html>